<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../css/style.css">
  <title>模板编译</title>
</head>
<body>
  <img src="../img/comliler-intruduce.png" alt="">
  <h2>模板编译</h2>
  <h3>概念</h3>
  <li>
    在Vue.js中创建HTML并不是只有模板这一种途径，我们既可以手动写渲染函数来创建HTML，也可以在Vue.js中使用JSX来创建HTML <span>JSX并不是渲染函数，应该也是一种模板，最后编译成渲染函数</span>
  </li>
  <li>
    模板编译所介绍的是，<span>如何拿到VNode</span>
  </li>
  <li>
    模板编译的主要目标就是生成渲染函数，而渲染函数的作用是每次执行它，他就会使用当前最新的状态生成一份新的vnode
  </li>

  <h3>将模板编译成渲染函数</h3>
  <li>
    将模板编译成渲染函数分为两步：先将模板解析称为AST（抽象树），然后再使用AST生成渲染函数
  </li>
  <li>
    <h4>流程</h4>
    <ul class="incent">
      <li>解析器：将模板编译成AST</li>
      <li>优化器：标记AST中的静态节点<span>静态节点不需要总是渲染</span></li>
      <li>代码生成器：使用AST生成渲染函数</li>
    </ul>
  </li>

  <h3>解析器</h3>
  <li>
    解析器内部包括过滤器解析器，文本解析器，HTML解析器，然后通过一条主线将这些解析器组装再一起。<span>主线上所作的事，就是监听HTML解析器。</span>
  </li>
  <li>
    过滤器的作用就是用来解析过滤器的
  </li>
  <li>
    文本解析器用来解析<span>带变量的文本</span>
  </li>
  <li>
    HTML解析器是最核心的模块，它的作用就是解析HTML标签的开始位置、结束位置、文本或者注释时，都会触发钩子函数，然后将相关信息通过参数传递出来。每当触发钩子时，就会生成AST，生成AST之前，会根据类型使用不同的方式生成不同的AST。例如，如果是文本节点，就生成文本类型的AST
  </li>

  <h3>优化器</h3>
  <li>
    优化器的目标是遍历AST，检测出所有的静态节点，并打上标记。每次重新渲染时，如果是静态节点，则直接克隆节点。优化器的主要功能时避免一些无用功能来提升性能
  </li>


  <h3>代码生成器</h3>
  <li>
    代码生成器是模板编译的最后一步，它的作用是将AST转换成渲染函数中的内容。这个内容可以称为“代码字符串”
  </li>
  <li>
    这个代码字符串最终导出到外界使用时，会将代码字符串放到函数里，这个函数就叫做渲染函数
  </li>
  <li>
    VNode的_c方法可以创建元素类型的vnode,  _v可以创建文本类型的vnode
  </li>
</body>
</html>